<template>
  <div class="my">
    <div class="my-bg" :style="{ backgroundImage: `url(${userInfo.userBg})` }">
      <van-uploader class="uploader-box" :after-read="uploadBg" />
    </div>
    <div class="user-box">
      <div class="user-info">
        <div class="user-img" :style="{ backgroundImage: `url(${AccountData.userImg})` }"></div>
        <div class="my-msg">
          <div class="my-name">{{ AccountData.nickName }}</div>
          <div class="my-disc">{{ AccountData.desc === ""?"这家伙很懒,没有留下东西!":AccountData.desc}}</div>
        </div>
      </div>
      <div class="my-list">
        <div class="item" @click="toData()">
          <!-- ;getNick() -->
          <div class="item-title">个人资料</div>
          <van-icon name="arrow" />
        </div>
        <div class="item" @click="toOrder">
          <div class="item-title">我的订单</div>
          <van-icon name="arrow" />
        </div>
        <div class="item" @click="toShouCang">
          <div class="item-title">我的收藏</div>
          <van-icon name="arrow" />
        </div>
        <div class="item" @click="toAddress">
          <div class="item-title">地址管理</div>
          <van-icon name="arrow" />
        </div>
        <div class="item" @click="toSafety">
          <div class="item-title">安全中心</div>
          <van-icon name="arrow" />
        </div>
        <h3></h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      // Desc:"这家伙很懒么也没留下!",
      userInfo: {},
      userImage: {},
      AccountData: {},
    };
  },
  created() {
    this.getUserInfo(),
    this.findAccountInfo()
  },
  methods: {
    //我的订单
    toData(){
        this.$router.push({ name: "MyData" });
    },
    toOrder(){
        this.$router.push({ name: "Order" });
    },
    toAddress(){
        this.$router.push({ name: "Address" });
    },
    toShouCang(){
      this.$router.push({ name: "ShouCang" });
    },
    toSafety(){
      this.$router.push({ name: "Safety" });
    },
    // 个人资料
    findAccountInfo() {
      //获取token
      let tokenString = sessionStorage.getItem("token");
      this.axios({
        method: "GET",
        url: "/findAccountInfo",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          // console.log("findAccountInfo ===>",res);
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }
          if (res.data.code == "B001") {
            this.AccountData.userImg = res.data.result[0].userImg;
            this.AccountData.nickName = res.data.result[0].nickName;
          }
          // console.log(res.data.result[0].userImg);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //上传背景
    uploadBg(file) {
      // 

      //获取base64
      let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, "");
      // 

      //获取token
     let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "POST",
        url: "/updateUserBg",
        data: {
          tokenString,
          serverBase64Img: base64,
          imgType: file.file.type.split(/\//)[1],
        },
      })
        .then((res) => {
          // console.log("updateUserBg ===>",res);
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);

            return;
          }

          this.$toast(res.data.msg);

          if (res.data.code === "I001" && res.data.result[0] === 1) {
            this.userInfo.userBg = res.data.userBg;
          }
        })
        .catch((err) => {
            console.log(err);
        });
    },
    // //上传头像
    updateImg(file) {
      //获取base64
      let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '');
      // 

      //获取token
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "POST",
        url: "/updateAvatar",
        data: {
          tokenString,
          serverBase64Img: base64,
          imgType: file.file.type.split(/\//)[1]
        },
      })
        .then((res) => {
          // console.log("updateAvatar ===>",res);
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);

            return;
          }

          this.$toast(res.data.msg);

          if (res.data.code === 'H001' && res.data.result[0] === 1) {
            this.userImage.userImg = res.data.userImg;
          }

        })
        .catch((err) => {
            console.log(err);
        });
    },

    //获取用户信息
    getUserInfo() {
      //获取token
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "GET",
        url: "/findMy",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          
          // console.log("个人信息",res);
          // if (res.data.code == 700) {
          //   //用户未登录, 拦截操作, 通知用户去登录
          //   this.$toast("请先登录");
          //   setTimeout(() => {
          //     this.$router.push({ name: "Login" });
          //   }, 2000);

          //   return;
          // }

          if (res.data.code === "A001") {
            this.userInfo = res.data.result[0];
            // this.userImage = res.data.result[0];
             this.AccountData = res.data.result[0];
          }
        })
        .catch((err) => {
            console.log(err);
        });
    },

  },
};
</script>

<style lang="less" scoped>
.my {
  /deep/ .van-icon {
    margin-left: auto;
    margin-top: 4px;
  }
  .my-list {
    margin-top: 60px;
  }
  .item {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 15px 0;
    border-bottom: 1px solid #f5f6f7;
    text-align: center;
    &:last-of-type {
      border-bottom: none;
    }
  }
  .user-img {
    height: 60px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    // background-color: tomato;
  }
  .uploader {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .my-name {
    font-size: 16px;
    color: #eb2403;
    font-weight: bold;
    margin-bottom: 12px;
  }
  .my-disc {
    color: #a8a8a6;
  }
  .my-msg {
    margin-left: 10px;
  }
  .my-bg {
    height: 160px;
    position: relative;
    background-repeat: no-repea;
    background-position: center center;
    background-size: cover;
    background-color: #e8e8e8;
  }

  .uploader-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  /deep/ .van-uploader__wrapper {
    width: 100%;
    height: 100%;
  }
  /deep/ .van-uploader__upload {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .user-box {
    margin: 10px;
    padding: 10px;
    position: relative;
    top: -50px;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.45) 0px,
      rgba(255, 255, 255, 0.45) 40px,
      #fff
    );
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .user-info {
    display: flex;
  }

  .user-img {
    width: 60px;
    height: 60px;
    // background-color: tomato;
  }
}
</style>